<template>
<div>
        <!-- <input type="text" v-model='state2.stus.id'>
        <input type="text" v-model='state2.stus.name'>
        <input type="text" v-model='state2.stus.thing'>
        <input type="submit" @click='addSub'>
  <ul>
    <li v-for="(stus,index) in state.stus" :key="stus.id" @click="remove(index)">
      {{stus.name}} {{stus.thing}}
    </li>
  </ul> -->

  <!-- <p>{{status.a}}</p>
  <button @click="zhuanhuan">zhuanhuan</button> -->


  <!-- <div ref="box">123</div> -->
  <p>{{obj.a}}</p>
  <p>{{obj.b.c}}</p>
  <p>{{obj.b.d.e}}</p>
  <p>{{obj.b.d.f.g}}</p>
  <button @click="zhuanhuan"></button>
</div>

</template>

<script>
// import useAddStudent from './add';
// import useRemoveStudent from './delete';
// export default {
//   name: 'App',
//   setup(){
//     let {state,remove} = useRemoveStudent();
//     let {state2,addSub} = useAddStudent(state);
//     return {state,remove,state2,addSub};
//   }
// }


// import {ref} from 'vue';
// export default {
//   name:'App',
//   setup(){
//     let status = ref({a:1});
//     function zhuanhuan(){
//       status.value.a = 777;
//       console.log(status.a);
//     }
//     return {status,zhuanhuan}

//   }
// }

// import {ref,onMounted} from 'vue'

// export default{
//   setup(){
//     let box = ref(null);//本质是reactive({value:null})

//     onMounted(()=>{
//       console.log('onmounted',box.value);
      
//     })

//     console.log(box.value);
//     return {box}
//   }
  
// }

import {reactive} from 'vue';
export default{
setup(){
  let obj = reactive({
      a:3,
      b:{
        c:4,
        d:{
          e:5,
          f:{
            g:6
          }
        }
      }
  })
  function zhuanhuan(){
    
  }
  return {obj,zhuanhuan}
}
   
}


</script>
